import { Button, Form, Input, Select, Space, message} from 'antd';
import Pannel from "../../component/Pannel/Pannel"
import {addAccount} from "../../api/account.js"
// 变量的声明，要放在import之后，否则报错
const { Option } = Select;

function AccountAdd(props){
    const [messageApi, contextHolder] = message.useMessage(); //获取提示对象

    // 业务逻辑
    // Form布局
    const layout = {
        labelCol: {
          span: 6,
        },
        wrapperCol: {
          span: 18,
        },
      };

     //   最后的按钮表单项布局
      const tailLayout = {
        wrapperCol: {
          offset: 6,
          span: 18,
        },
      };
    
      const [form] = Form.useForm(); //1.useForm 获取表单实例，取个名字叫form

      const onGenderChange = (value) => {
        switch (value) {
          case 'male':
            form.setFieldsValue({
              note: 'Hi, man!',
            });
            break;
          case 'female':
            form.setFieldsValue({
              note: 'Hi, lady!',
            });
            break;
          case 'other':
            form.setFieldsValue({
              note: 'Hi there!',
            });
            break;
          default:
        }
      };

      const onFinish = async (values) => {
        console.log(values);
        // 调用方法，提交数据(发请求给后端)
        let res = await addAccount({...values})
        console.log(res)

        // 处理结果
        if(res.code == 0){
            messageApi.open({
                type: 'success',
                content: res.msg,
            });
            // 重置表单
            form.resetFields();

        }else{
            messageApi.open({
                type: 'error',
                content: res.msg,
            });
        }
      };

      //3.重置表单 ：调用表曙实例的 resetFields()方法  
      const onReset = () => {
        form.resetFields();
      };

    // 模板
    return (
        <>
        {contextHolder}
        <Pannel title="添加账号">
        <Form
            {...layout}
            // 2.Form 组件中 通过form属性 与useForm创建的表单实例 关联起来
            form={form}
            name="control-hooks"

            // 表单完成验证、提交时事件处理
            onFinish={onFinish}
            style={{
                maxWidth: 500,
            }}
        >
            <Form.Item
                name="account"
                label="账号"
                rules={[
                    {
                        required: true,
                        message: '请输入用户名',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="账号密码"
                name="password"
                rules={[
                    {
                        required: true,
                        message: '请输入密码!',
                    },
                ]} 
            >
            <Input.Password />
            </Form.Item>
            
            <Form.Item
                name="userGroup"
                label="用户组"
                rules={[
                    {
                        required: true,
                        message:"请选择用户组"
                    },
                ]}
            >
                <Select
                    placeholder="请选择用户组"
                    onChange={onGenderChange}
                    allowClear
                >
                    <Option value="普通用户">普通用户</Option>
                    <Option value="超级管理员">超级管理员</Option>
                   
                </Select>
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Space>
                <Button type="primary" htmlType="submit">
                    添加
                </Button>
                <Button htmlType="button" onClick={onReset}>
                    重置
                </Button>
                </Space>
            </Form.Item>
            </Form>

        </Pannel>
        </>
    )
}

export default AccountAdd;